<template>
  <div class="app-container">
    <el-dialog
      :title="getTitle()"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- 表单数据 -->
      <div class="form-container">
        <el-form
          v-loading="loading"
          ref="dataForm"
          :model="dataForm"
          label-width="80px"
          :rules="dataRule"
        >
          <el-form-item label="审核状态" prop="status" v-show="isAudit !== 0">
            <dict-tag
              :options="dict.type.gonitis_education_status"
              :value="dataForm.status"
            />
          </el-form-item>
          <el-form-item label="患者来源" prop="subId">
            <el-cascader
              style="width: 230px"
              v-model="subIds"
              :props="defaultProps"
              @change="handleSubChange"
              clearable
              :options="deptOptions"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="教育标题" prop="title">
            <el-input
              :maxlength="18"
              show-word-limit
              clearable
              :disabled="isAudit !== 0"
              style="width: 400px"
              v-model="dataForm.title"
              placeholder="教育标题"
            ></el-input>
          </el-form-item>
          <el-form-item stye="font-weight :bold;" label="发布时间" prop="publishTime">
            <el-date-picker
              :disabled="isAudit !== 0"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="dataForm.publishTime"
              style="width: 400px"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="默认图片" prop="defaultPic">
            <image-upload
              :disabled="isAudit !== 0"
              :limit="1"
              v-model="dataForm.defaultPic"
            />
          </el-form-item>
          <el-form-item label="教育内容" prop="content">
            <!-- 富文本框 -->
            <editor
              v-model="dataForm.content"
              :min-height="500"
              :min-width="400"
              :fileSize="50"
              :readOnly="isAudit !== 0"
            />
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <!-- 修改或提交 -->
        <div class="submit-button" v-if="isAudit === 0">
          <el-button type="primary" @click="onSubmit">{{
            dataForm.id != 0 ? "立即修改" : "立即创建"
          }}</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>

        <!-- 审核 -->
        <div class="audit-button" v-else-if="isAudit === 1">
          <el-button type="success" :loading="buttonLoading" @click="changeAccess(1)"
            >审核通过</el-button
          >
          <el-button type="danger" :loading="buttonLoading" @click="changeAccess(3)"
            >审核不过</el-button
          >
        </div>

        <div class="detail-button" v-else>
          <el-button type="primary" :loading="buttonLoading" @click="close"
            >确认</el-button
          >
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  queryEducation,
  updateEducation,
  saveEducation,
  auditEducation,
} from "@/api/gonitis/education";
import { subTree } from "@/api/gonitis/illSub";
export default {
  name: "EducationEdit",
  dicts: ["gonitis_education_status"],
  data() {
    return {
      subIds: [],
      // 病情多选框映射
      defaultProps: {
        children: "children",
        label: "label",
        value: "id",
      },
      // 病情列表
      deptOptions: [],
      loading: false,
      buttonLoading: false,
      dialogVisible: false,
      isAudit: 0,
      dataForm: {
        title: "",
        subId: undefined,
        id: "",
        defaultPic: "",
        publishTime: "",
        content: "",
      },
      dataRule: {
        subId: [
          {
            message: "患者来源不能为空",
            required: true,
            trigger: ["change"],
          },
        ],
        content: [
          {
            validator: (rule, value, callback) => {
              if (!this.dataForm.content) {
                callback(new Error("必须填写发布内容"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: ["blur", "change"],
          },
        ],
        defaultPic: [
          {
            validator: (rule, value, callback) => {
              if (!this.dataForm.defaultPic) {
                callback(new Error("默认图片不能为空"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: ["change"],
          },
        ],
        title: [{ required: true, message: "教育标题不能为空", trigger: "blur" }],
        publishTime: [
          {
            message: "发布时间不能为空",
            required: true,
            trigger: ["change"],
          },
        ],
      },
    };
  },
  methods: {
    /** 病情分类选择框改变 */
    handleSubChange(value) {
      this.dataForm.subId = value[value.length - 1];
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      subTree().then((response) => {
        this.deptOptions = response.data;
      });
    },
    /** 返回对话框标题 */
    getTitle() {
      const base = "医疗教育";
      if (this.isAudit === 1) {
        return base + "审核";
      } else if (this.isAudit === 2) {
        return base + "详情";
      }
      if (this.dataForm.id) {
        return base + "修改";
      }
      return base + "添加";
    },
    /** 详情退出 */
    close() {
      this.$emit("getDataList");
      this.$parent.editVisible = false;
      this.dialogVisible = false;
    },
    /** 关闭对话框 */
    handleClose() {
      if (this.isAudit === 2) {
        this.close();
      } else {
        this.$confirm("确定要取消操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.close();
        });
      }
    },
    /** 审核通过 */
    changeAccess(status) {
      this.buttonLoading = true;
      const data = {
        id: this.dataForm.id,
        status: status,
      };
      auditEducation(data)
        .then((response) => {
          this.$modal.msgSuccess("审核成功");
          this.close();
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    /** 提交表单 */
    onSubmit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          const data = {
            id: this.dataForm.id !== 0 ? this.dataForm.id : "",
            title: this.dataForm.title,
            publishTime: this.dataForm.publishTime,
            subId: this.dataForm.subId,
            defaultPic: this.dataForm.defaultPic,
            content: this.dataForm.content,
          };
          if (this.dataForm.id) {
            updateEducation(data)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.close();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            saveEducation(data)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.close();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },

    /** 初始化 */
    init(id, isAudit) {
      this.getDeptTree();
      this.isAudit = isAudit;
      console.log(this.isAudit);
      this.dataForm.id = id || 0;
      this.dialogVisible = true;
      if (this.dataForm.id) {
        this.loading = true;
        queryEducation(this.dataForm.id).then((response) => {
          const educationInfo = response.data.educationInfo;
          this.dataForm.subId = educationInfo.subId;
          this.dataForm.title = educationInfo.title;
          this.dataForm.defaultPic = educationInfo.defaultPic;
          this.dataForm.status = educationInfo.status;
          this.dataForm.publishTime = educationInfo.publishTime;
          this.dataForm.content = educationInfo.content;
          this.subIds = response.data.subIds;
          this.loading = false;
        });
      }
    },
  },
};
</script>

<style scoped>
.form-container {
  margin-bottom: 50px;
}

.deleteImg {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}

.submit-button {
  margin-left: 80px;
  margin-top: 80px;
}

.detail-button {
  margin-left: 80px;
  margin-top: 80px;
}
.audit-button {
  margin-top: 80px;
  margin-left: 80px;
}

img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
</style>
